<%inherit file="/home_application/base_new.html"/>

<%block name="css">
<!--本模块加载的css-->
<link href="${STATIC_URL}assets/art-dialog/css/dialog.css" rel="stylesheet" type="text/css" />
</%block>


<%block name="content">

<!-- Page Heading -->
<div class="row page-header-box">
    <div class="col-lg-12">
        <h1 class="page-header">
            虚拟机管理
        </h1>
    </div>
</div>

<div class="main-wrap">

    <div class="panel panel-default">
        <div class="panel-heading">
            虚拟机搜索
        </div>
        <div class='panel-body'>
            <div class="col-sm-8">
                <form class="form-horizontal mt15" id="user_form" action="${SITE_URL}event/addEventSource/" method="post">
                    <div style="display:none">
                        <input type="hidden" name="csrfmiddlewaretoken" value="${csrf_token}">
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">操作系统类型：</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="event_role" name="event_role">
                                <option value="1">centos7</option>
                                <option value="2">centos6</option>
                                <option value="2">window</option>
                                <option value="2">ubuntu</option>
                            </select>
                            <span class="king-required-tip text-danger ml5">*</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">虚拟机名称：</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="请输入虚拟机名称" id="user_account" name="user_account">
                            <span class="king-required-tip text-danger ml5">*</span>
                        </div>
                        <div class="col-sm-1"></div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label"></label>
                        <div class="col-sm-10">
                            <button class="king-btn king-info mr10" title="搜索" type="submit">
                                <i class="fa fa-save btn-icon"></i>搜索
                            </button>
                            <a href="${SITE_URL}vmware/manage" class="king-btn king-default" title="返回">
                                <i class="fa fa-mail-reply-all btn-icon"></i>返回
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            虚拟机列表
        </div>

        <div class="panel-btns">
                <a type="button" onclick="VCenterManage.create();"  class="king-btn king-success pull-left mt15 ml15">
                    <i class="fa fa-gavel mr5"></i>创建虚拟机
                </a>
                <a type="button" onclick="VCenterManage.clone();"class="king-btn king-info pull-left mt15 ml15">
                    <i class="fa fa-user-plus mr5"></i>克隆虚拟机
                </a>
                <a type="button" data-type="success" onclick="VCenterManage.poweroff();"  class="king-btn king-info pull-left mt15 ml15">
                    <i class="fa fa-power-off mr5"></i>关闭虚拟机
                </a>

                <a type="button" onclick="VCenterManage.start();"  class="king-btn king-info pull-left mt15 ml15">
                    <i class="fa fa-play mr5"></i>开启虚拟机
                </a>
                <a type="button" onclick="VCenterManage.reboot();"  class="king-btn king-info pull-left mt15 ml15">
                    <i class="fa fa-history mr5"></i>重启虚拟机
                </a>
                <a type="button" onclick="VCenterManage.destroy();"  class="king-btn king-info pull-left mt15 ml15">
                    <i class="fa fa-trash-o mr5"></i>销毁虚拟机
                </a>
                <a type="button" onclick="VCenterManage.async();" class="king-btn king-info pull-left mt15 ml15">
                    <i class="fa fa-soundcloud mr5"></i>WebSSH
                </a>
                <a type="button" class="king-btn king-info pull-left mt15 ml15">
                    <i class="fa fa-user-plus mr5"></i>RDP
                </a>

        </div>

        <div class='panel-body'>
            <div class="panel-content">
                <table id="vcenter_manage_record" class="table table-bordered table-hover table-striped">
                    <thead>
                    <tr>
                        <th>虚拟机名称</th>
                        <th>虚拟机路径</th>
                        <th>虚拟机操作系统</th>
                        <th>虚拟机运行状态</th>
                        <th>虚拟机IP</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>

    </div>
</div>
<style>
    .tab-content-hide-border{
        border: none !important;
    }
</style>

<div id="createVmWizard" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">创建虚拟机</h4>
            </div>
            <div class="modal-body">
                <div class="navbar">
                    <div class="navbar-inner">
                        <div class="container">
                            <ul>
                                <li><a href="#tab1" data-toggle="tab">配置基本信息</a></li>
                                <li><a href="#tab2" data-toggle="tab">配置主机信息</a></li>
                                <li><a href="#tab3" data-toggle="tab">配置网络信息</a></li>
                                <li><a href="#tab4" data-toggle="tab">配置存储信息</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="tab-content tab-content-hide-border">
                    <div class="tab-pane" id="tab1">
                       <div class="row">
                           <form class="form-horizontal">
                               <div class="form-group clearfix ">
                                   <label class="col-sm-3 control-label bk-lh30 pt0">虚拟机名称：</label>
                                   <div class="col-sm-9">
                                       <input type="text" class="form-control bk-valign-top" id="" placeholder="请输入虚拟机名称"> </div>
                               </div>
                               <div class="form-group clearfix ">
                                   <label class="col-sm-3 control-label bk-lh30 pt0">虚拟机个数：</label>
                                   <div class="col-sm-9">
                                       <input type="text" class="form-control bk-valign-top" id="" placeholder="请输入虚拟机个数"> </div>
                               </div>
                               <div class="form-group clearfix ">
                                   <label class="col-sm-3 control-label bk-lh30 pt0">虚拟机描述：</label>
                                   <div class="col-sm-9">
                                       <input type="text" class="form-control bk-valign-top" id="" placeholder="请输入虚拟机描述"> </div>
                               </div>

                               <div class="form-group clearfix ">
                                   <label class="col-sm-3 control-label bk-lh30 pt0">所属部门：</label>
                                   <div class="col-sm-9">
                                       <select name="" id="" class="form-control bk-valign-top">
                                           <option value="选择项1">运维部</option>
                                           <option value="选择项2">开发部</option>
                                           <option value="选择项3">实施部</option>
                                           <option value="选择项4">市场部</option>
                                       </select>
                                   </div>
                               </div>

                               <div class="form-group clearfix ">
                                   <label class="col-sm-3 control-label bk-lh30 pt0">所属用户：</label>
                                   <div class="col-sm-9">
                                       <select name="" id="" class="form-control bk-valign-top">
                                           <option value="选择项1">张一</option>
                                           <option value="选择项2">刘三</option>
                                           <option value="选择项3">赵四</option>
                                       </select>
                                   </div>
                               </div>
                           </form>
                       </div>
                    </div>
                    <div class="tab-pane" id="tab2">
                        <div class="row">
                            <form class="form-horizontal">
                                <div class="form-group clearfix ">
                                    <label class="col-sm-3 control-label bk-lh30 pt0">选择操作系统：</label>
                                    <div class="col-sm-9">
                                        <select name="" id="" class="form-control bk-valign-top">
                                            <option value="选择项1">RHEL6</option>
                                            <option value="选择项2">Win2008</option>
                                            <option value="选择项3">Ubuntu</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group clearfix ">
                                    <label class="col-sm-3 control-label bk-lh30 pt0">选择集群：</label>
                                    <div class="col-sm-9">
                                        <select name="" id="" class="form-control bk-valign-top">
                                            <option value="选择项1">Shanghai-Cluster</option>
                                            <option value="选择项2">Beijing-Cluster</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group clearfix ">
                                    <label class="col-sm-3 control-label bk-lh30 pt0">选择主机：</label>
                                    <div class="col-sm-9">
                                        <select name="" id="" class="form-control bk-valign-top">
                                            <option value="选择项1">10.0.2.8</option>
                                            <option value="选择项1">10.0.2.12</option>
                                        </select>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="tab-pane" id="tab3">
                        <div class="row">
                            <form class="form-horizontal">
                                <div class="form-group clearfix ">
                                    <label class="col-sm-3 control-label bk-lh30 pt0">选择网络：</label>
                                    <div class="col-sm-9">
                                        <select name="" id="" class="form-control bk-valign-top">
                                            <option value="选择项1">办公网</option>
                                            <option value="选择项1">生产网</option>
                                        </select>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="tab-pane" id="tab4">
                        <div class="row">
                            <form class="form-horizontal">
                                <div class="form-group clearfix ">
                                    <label class="col-sm-3 control-label bk-lh30 pt0">选择存储：</label>
                                    <div class="col-sm-9">
                                        <select name="" id="" class="form-control bk-valign-top">
                                            <option value="选择项1">Datastore01-4T</option>
                                            <option value="选择项1">Datastore02-1T</option>
                                        </select>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <ul class="pager wizard">
                        <li class="previous first" style="display:none;"><a href="#">开始</a></li>
                        <li class="previous"><a href="#">上一步</a></li>
                        <li class="next last" style="display:none;"><a href="#">结束</a></li>
                        <li class="next"><a href="#">下一步</a></li>
                    </ul>
                </div>
            </div>
            <!--div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div-->
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div id="cloneVmWizard" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">克隆虚拟机</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <form class="form-horizontal">
                        <div class="form-group clearfix ">
                            <label class="col-sm-3 control-label bk-lh30 pt0">克隆虚拟机名称：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control bk-valign-top" id="" placeholder="请输入克隆虚拟机名称"> </div>
                        </div>
                        <div class="form-group clearfix ">
                            <label class="col-sm-3 control-label bk-lh30 pt0">克隆虚拟机个数：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control bk-valign-top" id="" placeholder="请输入克隆虚拟机个数"> </div>
                        </div>
                        <div class="form-group clearfix ">
                            <label class="col-sm-3 control-label bk-lh30 pt0">克隆虚拟机描述：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control bk-valign-top" id="" placeholder="请输克隆虚拟机描述"> </div>
                        </div>

                        <div class="tab-pane" id="tab4">
                            <div class="row">
                                <form class="form-horizontal">
                                    <div class="form-group clearfix ">
                                        <label class="col-sm-3 control-label bk-lh30 pt0">选择存储：</label>
                                        <div class="col-sm-9">
                                            <select name="" id="" class="form-control bk-valign-top">
                                                <option value="选择项1">Datastore01-4T</option>
                                                <option value="选择项1">Datastore02-1T</option>
                                            </select>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>




</%block>

<%block name="script">
<!--本模块加载的脚本-->
<script type="text/javascript" src="${STATIC_URL}assets/art-dialog/dist/dialog.js"></script>
<script type="text/javascript" src="${STATIC_URL}assets/twitter-bootstrap-wizard/jquery.bootstrap.wizard.js"></script>
<script type="text/javascript" src="${STATIC_URL}assets/twitter-bootstrap-wizard/prettify.js"></script>
<script type="text/javascript" src="${STATIC_URL}js/vmware_manage.js"></script>
</%block>